<template>
  <view>
    <!--自定义地址选择器-->
    <view class="cc_area_mask" v-if="show == true"></view>
    <view :class="'cc_area_view ' + (show ? 'show' : 'hide')">
      <view class="cc_area_view_btns">
        <text class="cc_area_view_btn_cancle" @tap="handleNYZAreaCancle">取消</text>
        <text class="cc_area_view_btn_sure" @tap="handleNYZAreaSelect" :data-province="province" :data-city="city" :data-area="area">确定</text>
      </view>
      <picker-view class="cc_area_pick_view" 
			indicator-style="height: 35px; border-top: none;" 
			@change="handleNYZAreaChange" :value="value">
        <picker-view-column class="picker-view-column">
          <view v-for="(item, index) in provinces" :key="index" class="cc_area_colum_view">{{ item }}</view>
        </picker-view-column>
        <picker-view-column class="picker-view-column">
          <view v-for="(item, index) in citys" :key="index" class="cc_area_colum_view">{{ item }}</view>
        </picker-view-column>
        <picker-view-column class="picker-view-column">
          <view v-for="(item, index) in areas" :key="index" class="cc_area_colum_view">{{ item }}</view>
        </picker-view-column>
      </picker-view>
    </view>
  </view>
</template>

<script>
import { getProvinces, getMyCity, getAreas } from './area.js';

var index = [0, 0, 0];
var provinces = getProvinces();
var citys = getMyCity(index[0]);
var areas = getMyCity(index[0], index[1]);

export default {
  mixins: [
    {
      methods: {
        setData: function (obj, callback) {
          let that = this;
          const handleData = (tepData, tepKey, afterKey) => {
            tepKey = tepKey.split('.');
            tepKey.forEach((item) => {
              if (tepData[item] === null || tepData[item] === undefined) {
                let reg = /^[0-9]+$/;
                tepData[item] = reg.test(afterKey) ? [] : {};
                tepData = tepData[item];
              } else {
                tepData = tepData[item];
              }
            });
            return tepData;
          };
          const isFn = function (value) {
            return typeof value == 'function' || false;
          };
          Object.keys(obj).forEach(function (key) {
            let val = obj[key];
            key = key.replace(/\]/g, '').replace(/\[/g, '.');
            let front, after;
            let index_after = key.lastIndexOf('.');
            if (index_after != -1) {
              after = key.slice(index_after + 1);
              front = handleData(that, key.slice(0, index_after), after);
            } else {
              after = key;
              front = that;
            }
            if (front.$data && front.$data[after] === undefined) {
              Object.defineProperty(front, after, {
                get() {
                  return front.$data[after];
                },
                set(newValue) {
                  front.$data[after] = newValue;
                  that.$forceUpdate();
                },
                enumerable: true,
                configurable: true
              });
              front[after] = val;
            } else {
              that.$set(front, after, val);
            }
          });
          isFn(callback) && this.$nextTick(callback);
        }
      }
    }
  ],
  data() {
    return {
      provinces: provinces,
      citys: getMyCity(index[0]),
      areas: getAreas(index[0], index[1]),
      value: [0, 0, 0],
      province: '北京市',
      city: '北京市',
      area: '东城区'
    };
  },

  components: {},
  props: {
    show: {
      //控制area_select显示隐藏
      type: Boolean,
      default: false
    },
    maskShow: {
      //是否显示蒙层
      type: Boolean,
      default: true
    }
  },
  methods: {
    handleNYZAreaChange: function (e) {
      var that = this;
      // console.log("e:" + JSON.stringify(e));
      var value = e.detail.value;
      /**
       * 滚动的是省
       * 省改变 市、区都不变
       */

      if (index[0] != value[0]) {
        index = [value[0], 0, 0];
        let selectCitys = getMyCity(index[0]);
        let selectAreas = getAreas(index[0], 0);
        that.setData({
          citys: selectCitys,
          areas: selectAreas,
          value: [index[0], 0, 0],
          province: provinces[index[0]],
          city: selectCitys[0],
          area: selectAreas[0]
        });
      } else if (index[1] != value[1]) {
        /**
         * 市改变了 省不变 区变
         */
        index = [value[0], value[1], 0];
        let selectCitys = getMyCity(index[0]);
        let selectAreas = getAreas(index[0], value[1]);
        that.setData({
          citys: selectCitys,
          areas: selectAreas,
          value: [index[0], index[1], 0],
          province: provinces[index[0]],
          city: selectCitys[index[1]],
          area: selectAreas[0]
        });
      } else if (index[2] != value[2]) {
        /**
         * 区改变了
         */
        index = [value[0], value[1], value[2]];
        let selectCitys = getMyCity(index[0]);
        let selectAreas = getAreas(index[0], value[1]);
        that.setData({
          citys: selectCitys,
          areas: selectAreas,
          value: [index[0], index[1], index[2]],
          province: provinces[index[0]],
          city: selectCitys[index[1]],
          area: selectAreas[index[2]]
        });
      }
    },

    /**
     * 确定按钮的点击事件
     */
    handleNYZAreaSelect: function (e) {
      var myEventDetail = e; // detail对象，提供给事件监听函数
      var myEventOption = {}; // 触发事件的选项
      this.$emit(
        'sureSelectArea',
        {
          detail: myEventDetail
        },
        myEventOption
      );
    },

    /**
     * 取消按钮的点击事件
     */
    handleNYZAreaCancle: function (e) {
      var that = this;
      console.log('e:' + JSON.stringify(e));
      this.$emit('hideShow', {
        detail: false
      });
    }
  }
};
</script>
<style scoped>
.cc_area_view {
  width: 100%;
  position: fixed;
  bottom: -1000px;

  left: 0px;
  background-color: #141414;
  z-index: 21;
  transition: all 0.3s;
}

.cc_area_pick_view {
  height: 200px;
  width: 100%;
}

::v-deep .uni-picker-view-mask {
	background: linear-gradient(to bottom, rgba(20, 20, 20, 1), transparent, rgba(20, 20, 20, 1)) !important;
}

/* #ifdef MP-WEIXIN */
::v-deep .picker-view-column {
  background: #141414;
}
/* #endif */

:-moz-broken ::v-deep .uni-picker-view-indicator {
  color: white;
}

::v-deep .uni-picker-view-indicator::after,
.uni-picker-view-indicator::before {
  border: none;
}

.cc_area_colum_view {
  /* background-color: #000; */
  line-height: 35px;
  text-align: center;
  font-size: 28upx;
}

.hide {
  bottom: -1000upx;
  transition: all 0.3s;
}

.show {
  bottom: 0upx;
  transition: all 0.3s;
}

.cc_area_view_btns {
  background-color: #141414;
  border-bottom: 1px solid #1a1a1a;
  font-size: 30upx;
  padding: 18upx 0upx;
}

.cc_area_view_btns > text {
  display: inline-block;
  word-spacing: 4upx;
  letter-spacing: 4upx;
}

.cc_area_view_btn_cancle {
  color: #808080;
  padding-right: 20upx;
  padding-left: 25upx;
}

.cc_area_view_btn_sure {
  float: right;
	color:  #EE5093;
  padding-left: 20upx;
  padding-right: 25upx;
}

.cc_area_mask {
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  position: absolute;
  top: 0upx;
  left: 0upx;
  z-index: 20;
}
</style>
